<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/2/24 0024
  Time: 11:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>绑定手机</title>
    <%--<style>--%>
        <%--.login_reg li {position:relative;/* padding:0 1rem 0 2rem; */}--%>
    <%--.login_reg .i_btn{ width:100%;}--%>
    <%--</style>--%>
    <style>
        .num_error{  right:0.5rem; top:0; color:#cb1448;}
    </style>
    <%--<style>--%>
        <%--.error{ ;color:#cb1448;}--%>
    <%--</style>--%>
    <script type="text/javascript">
        $(function($) {
            var countdown=5;
            $("#getVerifyCode").click(function () {
                        var obj = $(this);
                        var phoneNum=$("#userPhone").val();
                        if (phoneNum==null|| phoneNum==""){
                            $("#user-name-label > .num_error").remove();
                            $("#user-number-label > .num_error").remove();
                            $("#user-name-label").append('<span class="num_error">请输入手机号码</span>');
                        }else{

                            $.post(
                                    "${ctx}/checkPhoneNum",
                                    {
                                        "phoneNum":phoneNum
                                    },
                                    function(backdata){
                                        if (backdata=="yes"){
                                            $("#user-name-label > .num_error").remove();
                                            $("#user-number-label > .num_error").remove();
                                            $("#user-name-label").append('<span class="num_error">手机号码存在</span>');
                                        }else  if (backdata=="no"){
                                            var hasClick = $(obj).attr("hasclick");
                                            if(hasClick==1){
                                                countdown=60;
                                                $.ajax({
                                                    type: "GET",
                                                    url: "${ctx}/user/register_phone/"+phoneNum,
                                                    dataType:"JSON",
                                                    success: function(msg) {
                                                        if (msg == 0) {
                                                            $("#user-name-label > .num_error").remove();
                                                            $("#user-number-label > .num_error").remove();
                                                            $("#msg").html("验证码发送成功");
                                                            settime(obj);
                                                        }
                                                    }
                                                });
                                            }
                                        }
                                    }
                            )
                        }

                    }
            );
            function settime(val) {
                if (countdown == 0) {
//                $(val).removeAttribute("disabled");
                    $(val).attr("hasclick", "1");
                    $(val).text("免费获取验证码");
                } else {
                    $(val).attr("hasclick", "0");
//                $(val).("disabled", true);
                    $(val).text("重新发送(" + countdown + ")");
                    countdown--;
                    setTimeout(function () {
                        settime(val)
                    }, 1000);
                }
            }
        });
        function checkUser() {
            var number = document.getElementById("number"); //获取验证码框值
            var userPhone = document.getElementById("userPhone");  //获取手机框值
            if (userPhone.value == null || userPhone.value == "") {
                $("#user-name-label > .num_error").remove();
                $("#user-number-label > .num_error").remove();
                $("#user-name-label").append('<span class="num_error">请输入手机号</span>');
                return false;
            } else {
                var pattern = /^1[3|5|7|8|][0-9]{9}$/;
                if (!pattern.test(userPhone.value)) {
                    $("#user-name-label > .num_error").remove();
                    $("#user-number-label > .num_error").remove();
                    $("#user-name-label").append('<span class="num_error">手机格式不正确</span>');
                    return false;
                } else {
                    if (number.value == null || number.value == "") {
                        $("#user-name-label > .num_error").remove();
                        $("#user-number-label > .num_error").remove();
                        $("#user-number-label").append('<span class="num_error"  >请输入验证码</span>');
                        return false;
                    } else if (number.value.length < 4) {
                        $("#user-name-label > .num_error").remove();
                        $("#user-number-label > .num_error").remove();
                        $("#user-number-label").append('<span class="num_error"   >请输入正确的验证码</span>');
                        return false;
                    } else {
                        document.getElementById("phoneForm").submit();
                    }
                }
            }
        }
    </script>
</head>
<body class=" b-ffffff">
<form:form modelAttribute="PhoneModel" id="phoneForm" method="post" action="${ctx}/user/modify_phone">
<article class="viewports">
    <div class="p40 login_reg">
        <div class="lh2 mt20" >
            <div class="odr3 r5 plr20" >
                <input class="i_text"  id="userPhone"  type="text" name="userPhone"  placeholder="新手机号码">
            </div>
        </div>
        <span   id="user-name-label"></span>
        <c:if test="${errorType==4}">
            <span class="num_error" >${error}</span>
        </c:if>
        <div class="layout-box lh2 mt20">
            <div class="odr3 r5 plr20">
                <input  id="number" name="number" class="i_text" type="text" value="" placeholder="输入验证码">
            </div>
            <div class="box-col tar">
                <a id="getVerifyCode" href="javascript:void(0)" hasclick="1" class="c-33ccff">获取手机验证码</a>
            </div>
        </div>
        <span  id="user-number-label"></span>
        <c:if test="${errorType==1}">
            <span class="num_error" >${error}</span>
        </c:if>
        <c:if test="${errorType==2}">
            <span class="num_error" >${error}</span>
        </c:if>
        <c:if test="${errorType==3}">
            <span class="num_error">${error}</span>
        </c:if>
        <div class="pt50">
            <button type="button" class="i_btn b-ffaa3b cf r5 lh2" onclick = "checkUser();">保存</button>
        </div>
    </div>
</article>
</form:form>
</body>
</html>